import React from 'react'
import {Table, Dropdown, Button, Menu, Icon, Modal,Popconfirm,Select,Input,Tag,Badge,Row,Col,Radio,Checkbox} from 'antd'
const RadioGroup = Radio.Group;
import EditableCell from '../ui/editablecell'
import styles from './list.less'
const confirm = Modal.confirm

class list extends React.Component {
  constructor (props) {
    super(props)

    const {current} = this.props.pagination
    this.currentPage = current
    this.newPage = current
    this.changedItem={}
    this.state={
        visible: false,
        isValid:1,
        isChecked:false
    }
    //弹出窗口标识
    this.active={}
    this.data=[]
  }
 
  componentDidUpdate(){
    
  }
  showModal=(index,id,key,value,content)=>{

    this.active.id=id;
    this.active.key=key;
    this.active.index=index;
    if(content==undefined){
      content=""
    }
    this.setState({
      visible: true,
    });
    
    setTimeout(function(){
      $("#gas-value").val(value);
      $("#cause-value").val(content.replace("数值修约:",""));
    },200)
    
  }
  handleOk = () => {
    
     let causeValue=$("#cause-value").val()
     let gasValue=$("#gas-value").val()
     let id=this.active.id
     let key=this.active.key
     let cause={
       content:causeValue,
       isValid:this.state.isValid,
       isChecked:this.state.isChecked
     }
     this.changedItem[id]["cause"][key]=cause
     this.changedItem[id][key]=gasValue

     let data=this.props.dataSource.concat()
     data[this.active.index][key]=gasValue

     let causes=data[this.active.index]["causes"]
     if(causes==undefined){
       causes=[]
     }
     
     //如果存在旧的数据，删掉重新push
     let len=causes.length
     for(var i=0;i<len;i++){
       if(causes[i]["gas"]==key){
         causes[i]={}
         break
       }
     }
     data[this.active.index]["causes"].push(
       {
         gas:key,
         content:causeValue,
         isValid:this.state.isValid
       }
     )
     //关闭弹窗，清除数据

     this.setState({
        visible: false
     });
     
  }
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }
  onValidChange = (e) => {
    this.setState({
      isValid: e.target.value,
    });
  }
  onCheckChange = (e) => {
     this.setState({
      isChecked: e.target.checked,
    });
  }
  renderColumns(dataSource,origin, index, key, text) {
    const { editable,id,status } = dataSource[index];
    let causes=dataSource[index]["causes"]
    if(text<0&&origin!=undefined){
      text=origin[key]
    }

    let cause=undefined
    let isValid=1
    //遍历causes,查找是否存在key
    for(var i=0;i<causes.length;i++){
      let item=causes[i]
      if(item["gas"]==key){
        cause=item["content"]
        isValid=item["isValid"]
        break
      }
    }
    
    return (<div><EditableCell
      editable={editable}
      value={text}
      cause={cause}
      isValid={isValid}
      onChange={value => this.handleChange(key, index, value,id)}
      status={status}
    />
   {editable?
   <Button style={{marginTop:5}} onClick={()=>this.showModal(index,id,key,text,cause)}>{cause==undefined||cause==""?'设置原因':cause}</Button>     
   :""}
    </div>
    );
  }
  renderOperation(index,id,flag) {
      const {onEditItem,onCommitItem} = this.props
    
      if(flag==0||flag==2){
          return(
            <span>
              <a onClick={() => onEditItem(index)}>修改</a>
            </span>
          )
      }else if(flag==1||flag==3){
          return(
            <span>
              <a style={{color:'#999'}}>修改</a>
            </span>
          )
      }
      
  }
  handleChange(key, index, value,id){
    this.changedItem[id][key]=value
  }
  handleInputChange(value,id,key){
    
    this.changedItem[id]["cause"][key]=value

  }

  handleEditItemDone(index,type,id){
     
      const item=this.changedItem[id]
      const data=this.props.dataSource[index]
      //遍历补充数值未变化的批准
      for (var key of Object.keys(item)) {
            if(item[key]==undefined){
              item[key]=data[key]
            }
      }

      //清空缓存数据
      this.changedItem[id]={id:id,cause:{}}
      this.props.onEditItemDone(index,type,item)
  }
  render () {
    const {loading,copyList,originSource, pagination, onPageChange} = this.props
    let dataSource=this.props.dataSource
    if(this.props.copyList!=undefined&&this.props.copyList.length>0){
      dataSource=this.props.copyList
    }
    const columns = [
      {
        title: '时间',
        dataIndex: 'timepoint',
        key: 'timepoint',
        render: (text, record, index) => {
            const id=record["id"]
            if(id==9999991){
              return(<span>最大值(审核前)</span>)
            }else if(id==9999994){
              return(<span>最大值(审核后)</span>)
            }else if(id==9999992){
              return(<span>最小值(审核前)</span>)
            }else if(id==9999995){
              return(<span>最小值(审核后)</span>)
            }else if(id==9999993){
               return(<span>平均值(审核前)</span>)
            }else if(id==9999996){
              return(<span>平均值(审核后)</span>)
            }else{
              return(<span>{text}</span>)
            }

        }
      }, {
        title: 'CO',
        dataIndex: 'co',
        key: 'co',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'co', text),
      }, {
        title: 'NO2',
        dataIndex: 'no2',
        key: 'no2',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'no2', text),
      }, {
        title: 'SO2',
        dataIndex: 'so2',
        key: 'so2',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'so2', text),
      }, {
        title: 'O3',
        dataIndex: 'o3',
        key: 'o3',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'o3', text),
      }, {
        title: 'PM10',
        dataIndex: 'pm10',
        key: 'pm10',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'pm10', text),
      }, {
        title: 'PM25',
        dataIndex: 'pm25',
        key: 'pm25',
        render: (text, record, index) => this.renderColumns(dataSource,originSource[index], index, 'pm25', text),
      }, {
        title: '状态',
        dataIndex: 'flag',
        key: 'flag',
        render: (text, record, index) => {
          if(record.timepoint==null){
            return(<span></span>)
          }
          if(text==0||text==2){
            return <Badge status="default" text="待审核" />
          }else if(text==1){
            return <Badge status="error" text="待复核" />
          }else if(text==3){
            return <Badge status="success" text="已复核" />
          }
        },
      }, {
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record,index) => {
          if(record.timepoint==null){
            return(<span></span>)
          }
          const { editable,id,flag } = record;
          if(this.changedItem[id]==undefined){
              this.changedItem[id]={"id":id,"cause":{}}
          }
          
          return (<div className="editable-row-operations">
            {
              editable ?
                <span>
                  <a onClick={() => this.handleEditItemDone(index, 'cancel',id)}>取消</a>
                  <Popconfirm title="确定要保存?" onConfirm={() => this.handleEditItemDone(index,'save',id)}>
                    <a>保存</a>
                  </Popconfirm>
                </span>
                :
                this.renderOperation(index,id,flag)
            }
          </div>)
        }
      }
    ]
    const self = this
    const {onCommitItem} = this.props
    const button=function(){
      if(dataSource[0]==undefined||dataSource[0].flag==0||dataSource[0].flag==2){
        return(
          <div>
            <Button size='large' type='ghost' onClick={onCommitItem}>上传数据</Button>
          </div>
        )
      }
       return(<div></div>)
    }()
    return <div>
      <Modal title="情况说明"
          visible={this.state.visible}
          onOk={this.handleOk}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.handleCancel}>
          值：<input id="gas-value" style={{width:50,marginBottom:8}} className="ant-input"/>
          <textarea id="cause-value" className="ant-input" rows="3" />
          <RadioGroup style={{marginTop:8}} onChange={this.onValidChange} value={this.state.isValid}>
            <Radio value={1}>数据有效</Radio>
            <Radio value={0}>数据无效</Radio>
          </RadioGroup>
          <p/>
          <Checkbox style={{marginTop:8}} onChange={this.onCheckChange}>数值修约</Checkbox>
      </Modal>
      <Row gutter={24}>
      <Col lg={8} md={12} sm={16} xs={24} style={{marginBottom: 16}}>
        
      </Col>
      <Col lg={{offset: 8, span: 8}} md={12} sm={8} xs={24} style={{marginBottom: 16, textAlign: 'right'}}>
        {button}
      </Col>
    </Row>
      <Table className={styles.table} bordered columns={columns} dataSource={dataSource} loading={loading} pagination={false} simple rowKey={record => record.id} />
      
    </div>
  }
}

export default list
